import React from 'react'
import { View, Text } from '@tarojs/components'
import { Empty, Popup } from 'antd-mobile'
import './index.scss'

type PropsType = {
  key?: string //加上防止多个弹窗互相影响
  title?: string
  isOpened: boolean
  className?: string
  setIsOpened: (visible: boolean) => void
  children: JSX.Element | JSX.Element[]
}

function CustomPopup(props: PropsType) {
  const { key = '', title = '', isOpened, setIsOpened, className } = props

  return (
    <Popup
      key={key}
      visible={isOpened}
      className={`custom_popup_modal`}
      onMaskClick={() => setIsOpened(false)}
      bodyStyle={{
        borderTopLeftRadius: '8px',
        borderTopRightRadius: '8px',
        minHeight: '10vh',
        backgroundColor: '#fff',
      }}
    >
      <View className={'title_wrapper'}>
        <View className={'text'}>{title}</View>
        <View className={'icon'} onClick={() => setIsOpened(false)}></View>
      </View>
      <View className={'children_list'}>
        <View className={`content ${className}`}>
          {props.children || <Empty description='暂无数据' />}
        </View>
      </View>
      {/* <View className="popup_cancel_btn" onClick={() => setIsOpened(false)}>
        取消
      </View> */}
    </Popup>
  )
}
export default CustomPopup
